<template>
  <div class="auth-management">
    <div class="page-header">
      <h1>实名认证审核</h1>
      <p>审核用户的实名认证申请</p>
    </div>

    <!-- 筛选和搜索 -->
    <el-card class="filter-card" shadow="never">
      <el-row :gutter="16">
        <el-col :span="6"><el-input v-model="searchQuery" placeholder="搜索用户名称/手机号" clearable @input="handleSearch" /></el-col>
        <el-col :span="6">
          <el-select v-model="statusFilter" placeholder="审核状态" clearable @change="handleSearch">
            <el-option label="待审核" value="pending" />
            <el-option label="审核通过" value="approved" />
            <el-option label="审核拒绝" value="rejected" />
          </el-select>
        </el-col>
      </el-row>
    </el-card>

    <!-- 审核列表 -->
    <el-card class="table-card" shadow="hover">
      <el-table :data="paginatedAuths" v-loading="loading">
        <el-table-column label="申请人" prop="name" width="120" />
        <el-table-column label="手机号" prop="phone" width="150" />
        <el-table-column label="身份证号" prop="idCard" width="180" />
        <el-table-column label="申请时间" prop="applyTime" width="180" />
        <el-table-column label="状态" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="statusMap[row.status].type">{{ statusMap[row.status].text }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" link @click="openAuditDialog(row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
       <div class="pagination-container">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="filteredAuths.length" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSearch" @current-change="handleSearch" />
      </div>
    </el-card>

    <!-- 审核对话框 -->
    <el-dialog v-model="auditDialogVisible" title="实名认证审核" width="600px">
      <div v-if="currentAuth" class="audit-dialog-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ currentAuth.name }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ currentAuth.phone }}</el-descriptions-item>
          <el-descriptions-item label="身份证号" :span="2">{{ currentAuth.idCard }}</el-descriptions-item>
          <el-descriptions-item label="身份证照片" :span="2">
            <el-image :src="currentAuth.idCardFront" style="width: 150px; height: 100px; margin-right: 10px;" :preview-src-list="[currentAuth.idCardFront, currentAuth.idCardBack]" />
            <el-image :src="currentAuth.idCardBack" style="width: 150px; height: 100px;" :preview-src-list="[currentAuth.idCardFront, currentAuth.idCardBack]" />
          </el-descriptions-item>
        </el-descriptions>
        <el-form :model="auditForm" label-width="100px" style="margin-top: 20px;">
          <el-form-item label="审核结果">
            <el-radio-group v-model="auditForm.action">
              <el-radio label="approve">通过</el-radio>
              <el-radio label="reject">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="拒绝原因" v-if="auditForm.action === 'reject'">
            <el-input type="textarea" v-model="auditForm.remarks" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="auditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAudit">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';

const loading = ref(false);
const searchQuery = ref('');
const statusFilter = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const auditDialogVisible = ref(false);
const currentAuth = ref(null);

const auths = ref([
  { id: 1, name: '张三', phone: '13800138000', idCard: '110101199003071234', applyTime: '2024-05-20 10:00', status: 'pending', idCardFront: 'https://via.placeholder.com/300x200/4facfe/ffffff?text=正面', idCardBack: 'https://via.placeholder.com/300x200/4facfe/ffffff?text=反面' },
  { id: 2, name: '李四', phone: '13900139000', idCard: '110102198505155678', applyTime: '2024-05-19 15:30', status: 'approved', idCardFront: 'https://via.placeholder.com/300x200/667eea/ffffff?text=正面', idCardBack: 'https://via.placeholder.com/300x200/667eea/ffffff?text=反面' },
  { id: 3, name: '王五', phone: '13700137000', idCard: '110105199208222468', applyTime: '2024-05-18 09:00', status: 'rejected', idCardFront: 'https://via.placeholder.com/300x200/f093fb/ffffff?text=正面', idCardBack: 'https://via.placeholder.com/300x200/f093fb/ffffff?text=反面' },
]);

const auditForm = reactive({ action: 'approve', remarks: '' });

const statusMap = {
  pending: { text: '待审核', type: 'warning' },
  approved: { text: '审核通过', type: 'success' },
  rejected: { text: '审核拒绝', type: 'danger' },
};

const filteredAuths = computed(() => {
  return auths.value.filter(a => {
    const searchMatch = a.name.includes(searchQuery.value) || a.phone.includes(searchQuery.value);
    const statusMatch = !statusFilter.value || a.status === statusFilter.value;
    return searchMatch && statusMatch;
  });
});

const paginatedAuths = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredAuths.value.slice(start, end);
});

const handleSearch = () => { currentPage.value = 1; };

const openAuditDialog = (auth) => {
  currentAuth.value = auth;
  auditForm.action = 'approve';
  auditForm.remarks = '';
  auditDialogVisible.value = true;
};

const submitAudit = () => {
  if (!currentAuth.value) return;
  currentAuth.value.status = auditForm.action;
  ElMessage.success('审核操作成功');
  auditDialogVisible.value = false;
};
</script>

<style scoped>
.auth-management { max-width: 1200px; margin: 0 auto; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 24px; font-weight: 700; }
.page-header p { color: #666; }
.filter-card, .table-card { margin-bottom: 24px; border-radius: 12px; }
.pagination-container { display: flex; justify-content: center; margin-top: 24px; }
.audit-dialog-content .el-descriptions { margin-bottom: 20px; }
</style> 